<template>
  <el-card class="box-card">
    <el-row>
      <el-col :span="24">
        <div>
          <span
            style="color: cornflowerblue; font-size: 20px; line-height: 50px">评审选项</span>
        </div>
        <div>
          <el-table
            v-loading="loading"
            :data="GroupList"
            style="width: 100%; margin-bottom: 20px"
            border>
            <el-table-column prop="dselectionName" label="名称"> 
                <template v-slot="scope">
                <span v-show="scope.row.state"> {{ scope.row.dselectionName }}</span>
                <el-input
                  type="text"
                  v-model="scope.row.dselectionName"
                  v-show="!scope.row.state"/>
              </template>
            </el-table-column>
            <el-table-column prop="totalPoints" label="分数">
              <template v-slot="scope">
                <span v-show="scope.row.state"> {{ scope.row.totalPoints }}</span>
                <el-input
                  type="text"
                  v-model="scope.row.totalPoints"
                  v-show="!scope.row.state"/>
              </template>
            </el-table-column>
            <el-table-column label="操作">
              <template v-slot="scope">
                <el-button
                  @click="handleEdit(scope.$index, scope.row)"
                  v-show="scope.row.state">编辑</el-button>
                <el-button
                  type="success"
                  @click="hold(scope.$index, scope.row)"
                  v-show="!scope.row.state">保存</el-button>
                <el-button
                  type="danger"
                  @click="handleDelete(scope.$index, scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <el-button type="warning" plain @click="addLine()">添加评审选项</el-button>
        </div>
      </el-col>
    </el-row>
  </el-card>
</template>

<script>
import { v4 } from "uuid";
export default {
  //数据
  data() {
   
    return {
      GroupList: undefined,
      GroupInfor: {
          dselectionName:"",//评审选项名称
          totalPoints:"",  //分数
          creator:JSON.parse(localStorage.getItem("user")).userName,//创建人
          modifier:JSON.parse(localStorage.getItem("user")).userName,//修改人
          modifierTime:new Date(),//修改时间
          isDelete:0,
          createDate:new Date(),//创建时间
      },

      
      loading: true,

    };


  },
  //计算属性
  computed: {},
  //挂载
  created() {
    this.GetStandarList();
  },
  //方法
  methods: {
    //获取专家分组信息
    GetStandarList() {
      this.loading = true;
      this.http
        .get("api/tb_project_reviewstandar_item/GetList")
        .then((res) => {
          //console.log(res.data)
          this.GroupList = res.data;
          this.loading = false;
          //console.log(this.GroupList);
        });
    },
    /* 编辑 */
    handleEdit(index, row) {
      row.state = false;
    },
    /* 保存，新添加的后或修改的重新保存 */
    hold(index, row) {
      //有id序走修改
      if (row.standardselectionID != undefined) {
        console.log(row.standardselectionID)
        let main={
            standardselectionID:row.standardselectionID,
            dselectionName:row.dselectionName,
            totalPoints:row.totalPoints,
            creator:JSON.parse(localStorage.getItem("user")).userName,//创建人
            modifier:JSON.parse(localStorage.getItem("user")).userName,//修改人
            modifierTime:new Date(),//修改时间
            isDelete:0,
            createDate:new Date(),//创建时间
        }
        this.http.post("api/tb_project_reviewstandar_item/UpdateInfo", main).then((res) => {
          console.log(main);
          if (res.status) {
            this.$message({
              type: "success",
              message: res.message,
            });
            this.GetStandarList();
          } else {
            this.$message("保存失败");
          }
        });
      } //没id走添加
      else {
        if(row.dselectionName==""||row.totalPoints==""){
            this.$message("不能为空！")
            return
        }
        else{
            this.GroupInfor.dselectionName = row.dselectionName;
            this.GroupInfor.totalPoints = row.totalPoints;
            let main = {
              mainData: this.GroupInfor,
              detailData: null,
              delKeys: null,
            };
            console.log(main);
            this.http.post("api/tb_project_reviewstandar_item/Add", main).then((res) => {
            console.log(res);
            if (res.status) {
                this.$message({
                type: "success",
                  message: res.message,
              });
                this.GetStandarList();
              } else {
                this.$message("添加失败");
              }
            });
          }
      }
      row.state = true;
    },
    /* 删除 */
    handleDelete(index, row) {
      //console.log(index, row);
      //this.GroupList.splice(row);
      this.$confirm("确认删除？？？", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          var ids = [];
          ids.push(row.standardselectionID);
          this.http.get("api/tb_project_reviewstandar_item/DeleteList?id="+ids).then((res) => {
            if (res.status) {
              this.GetStandarList();
              this.$message({
                type: "success",
                message: res.message,
              });
            } else {
              this.$message({
                type: "error",
                message: res.message,
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
          this.Isdisable = true;
        });
    },

    /* 添加新的一行 (默认是可编辑状态)*/
    addLine() {
      let obj = {
        dselectionName:"",
        totalPoints:"",
      };
      //追加
      this.GroupList.push(obj);
    },
  },
};
</script>

<style>
.el-input__wrapper {
  display: inline-flex;
  flex-grow: 1;
  align-items: center;
  justify-content: center;
  padding: 1px 11px;
  background-color: var(--el-input-bg-color, var(--el-fill-color-blank));
  background-image: none;
  border-radius: var(--el-input-border-radius, var(--el-border-radius-base));
  transition: var(--el-transition-box-shadow);
  box-shadow: 0 0 0 0px var(--el-input-border-color, var(--el-border-color))
    inset;
  border-bottom: 0px solid;
}

.el-form-item.is-error .el-input__wrapper {
  box-shadow: 0 0 0 1px #ffffff inset;
}

.el-input__wrapper.is-focus {
  box-shadow: 0 0 0 1px white inset;
}

.el-input {
  --el-input-text-color: var(--el-text-color-regular);
  --el-input-border: var(--el-border);
  --el-input-hover-border: var(--el-border-color-hover);
  --el-input-focus-border: var(--el-color-primary);
  --el-input-transparent-border: 0 0 0 1px transparent inset;
  --el-input-border-color: var(--el-border-color);
  --el-input-border-radius: var(--el-border-radius-base);
  --el-input-bg-color: var(--el-fill-color-blank);
  --el-input-icon-color: var(--el-text-color-placeholder);
  --el-input-placeholder-color: var(--el-text-color-placeholder);
  --el-input-hover-border-color: #ffffff;
  --el-input-clear-hover-color: var(--el-text-color-secondary);
  --el-input-focus-border-color: var(--el-color-primary);
}

.el-select {
  --el-select-border-color-hover: #ffffff;
  --el-select-disabled-border: var(--el-disabled-border-color);
  --el-select-font-size: var(--el-font-size-base);
  --el-select-close-hover-color: var(--el-text-color-secondary);
  --el-select-input-color: var(--el-text-color-placeholder);
  --el-select-multiple-input-color: var(--el-text-color-regular);
  --el-select-input-focus-border-color: #ffffff;
  --el-select-input-font-size: 14px;
}

.el_Select /deep/ :root {
  color-scheme: light;
  --el-color-white: #ffffff;
  --el-color-black: #000000;
  --el-color-primary: none;
  --el-color-primary-light-3: #79bbff;
  --el-color-primary-light-5: #a0cfff;
  --el-color-primary-light-7: #c6e2ff;
  --el-color-primary-light-8: #d9ecff;
  --el-color-primary-light-9: #ecf5ff;
  --el-color-primary-dark-2: #337ecc;
  --el-color-success: #67c23a;
  --el-color-success-light-3: #95d475;
  --el-color-success-light-5: #b3e19d;
  --el-color-success-light-7: #d1edc4;
  --el-color-success-light-8: #e1f3d8;
  --el-color-success-light-9: #f0f9eb;
  --el-color-success-dark-2: #529b2e;
  --el-color-warning: #e6a23c;
  --el-color-warning-light-3: #eebe77;
  --el-color-warning-light-5: #f3d19e;
  --el-color-warning-light-7: #f8e3c5;
  --el-color-warning-light-8: #faecd8;
  --el-color-warning-light-9: #fdf6ec;
  --el-color-warning-dark-2: #b88230;
  --el-color-danger: #f56c6c;
  --el-color-danger-light-3: #f89898;
  --el-color-danger-light-5: #fab6b6;
  --el-color-danger-light-7: #fcd3d3;
  --el-color-danger-light-8: #fde2e2;
  --el-color-danger-light-9: #fef0f0;
  --el-color-danger-dark-2: #c45656;
  --el-color-error: #f56c6c;
  --el-color-error-light-3: #f89898;
  --el-color-error-light-5: #fab6b6;
  --el-color-error-light-7: #fcd3d3;
  --el-color-error-light-8: #fde2e2;
  --el-color-error-light-9: #fef0f0;
  --el-color-error-dark-2: #c45656;
  --el-color-info: #909399;
  --el-color-info-light-3: #b1b3b8;
  --el-color-info-light-5: #c8c9cc;
  --el-color-info-light-7: #dedfe0;
  --el-color-info-light-8: #e9e9eb;
  --el-color-info-light-9: #f4f4f5;
  --el-color-info-dark-2: #73767a;
  --el-bg-color: #ffffff;
  --el-bg-color-page: #f2f3f5;
  --el-bg-color-overlay: #ffffff;
  --el-text-color-primary: #303133;
  --el-text-color-regular: #606266;
  --el-text-color-secondary: #909399;
  --el-text-color-placeholder: #a8abb2;
  --el-text-color-disabled: #c0c4cc;
  --el-border-color: #dcdfe6;
  --el-border-color-light: #e4e7ed;
  --el-border-color-lighter: #ebeef5;
  --el-border-color-extra-light: #f2f6fc;
  --el-border-color-dark: #d4d7de;
  --el-border-color-darker: #cdd0d6;
  --el-fill-color: #f0f2f5;
  --el-fill-color-light: #f5f7fa;
  --el-fill-color-lighter: #fafafa;
  --el-fill-color-extra-light: #fafcff;
  --el-fill-color-dark: #ebedf0;
  --el-fill-color-darker: #e6e8eb;
  --el-fill-color-blank: #ffffff;
  --el-box-shadow: 0px 12px 32px 4px rgba(0, 0, 0, 0.04),
    0px 8px 20px rgba(0, 0, 0, 0.08);
  --el-box-shadow-light: 0px 0px 12px rgba(0, 0, 0, 0.12);
  --el-box-shadow-lighter: 0px 0px 6px rgba(0, 0, 0, 0.12);
  --el-box-shadow-dark: 0px 16px 48px 16px rgba(0, 0, 0, 0.08),
    0px 12px 32px rgba(0, 0, 0, 0.12), 0px 8px 16px -8px rgba(0, 0, 0, 0.16);
  --el-disabled-bg-color: var(--el-fill-color-light);
  --el-disabled-text-color: var(--el-text-color-placeholder);
  --el-disabled-border-color: var(--el-border-color-light);
  --el-overlay-color: rgba(0, 0, 0, 0.8);
  --el-overlay-color-light: rgba(0, 0, 0, 0.7);
  --el-overlay-color-lighter: rgba(0, 0, 0, 0.5);
  --el-mask-color: rgba(255, 255, 255, 0.9);
  --el-mask-color-extra-light: rgba(255, 255, 255, 0.3);
  --el-border-width: 1px;
  --el-border-style: solid;
  --el-border-color-hover: var(--el-text-color-disabled);
  --el-border: var(--el-border-width) var(--el-border-style)
    var(--el-border-color);
  --el-svg-monochrome-grey: var(--el-border-color);
}
</style>


